<template>

    <div style="max-width: 650px;text-align: center;margin: 0 auto;background-color: white;">


        <!-- 滚动容器 -->
        <div ref="imgItems" :class="{ bigBox: !CWStore.showBar, sBox: CWStore.showBar }"
            style="width: 100%;overflow-y: auto;">

            <div :id="'img' + (index + 1)" :imgID="index + 1" v-for="(url, index) in infoList">

                <el-tooltip placement="bottom" :content="index + 1 + ' / ' + infoList.length">
                    <!-- 图片 -->
                    <el-image :src="url" lazy
                        style="max-width: 650px; min-height: 600px;padding: 15px;background-color: white;">
                        <template #error>
                            <div style="font-size: 30px;text-align: center;line-height: 600px;">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                            </div>
                        </template>
                    </el-image>


                </el-tooltip>
            </div>


        </div>


    </div>
</template>


<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useCWStore } from '@/stores/cwStore';
import axios from 'axios';

const CWStore = useCWStore();
const imgItems = ref()
let observer;
let list;


onMounted(async () => {
    if (CWStore.prop.cid !== 'local') {
        await getChapterInfo()
        list = imgItems.value.children
        initObserver()
    } else {
        await getLocalInfo()
        list = imgItems.value.children
        initObserver()
    }
})

watch(
    () => CWStore.prop.chapterIndex,
    async () => {
        CWStore.prop.chapterName = CWStore.chapterList[CWStore.prop.chapterIndex];
        await getChapterInfo()
        list = imgItems.value.children
        initObserver()
    });

watch(
    () => CWStore.currentPos,
    () => {
        if (CWStore.currentPos != CWStore.currentID) {
            list[CWStore.currentPos - 1].scrollIntoView({
                behavior: "instant",
                block: "start"
            });
        }
    }
)


const infoList = ref([
    "/images/为美好的世界献上祝福！/1话/001.jpg",
    "/images/为美好的世界献上祝福！/1话/002.jpg",
    "/images/为美好的世界献上祝福！/1话/003.jpg",
    "/images/为美好的世界献上祝福！/1话/004.jpg",
    "/images/为美好的世界献上祝福！/1话/005.jpg",
    "/images/为美好的世界献上祝福！/1话/006.jpg",
    "/images/为美好的世界献上祝福！/1话/007.jpg",
    "/images/为美好的世界献上祝福！/1话/008.jpg",
])


const getChapterInfo = async () => {
    try {
        const result = await axios.get('/api/cartoon/chapter/' + CWStore.prop.cid + '/' + CWStore.prop.chapterName);
        if (result.data.code === 200) {
            infoList.value = result.data.data;
            console.log("获取章节信息：");
            console.log(infoList);
            
            CWStore.infoLength = infoList.value.length
        }
    } catch (err) {
        ElMessage.error({
            showClose: true,
            message: "获取章节信息失败！！！"
        })
        console.log(err);
    }
}

const initObserver = function () {
    if (observer) observer.disconnect()
    observer = new IntersectionObserver(
        (entries) => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    CWStore.currentID = +e.target.getAttribute('imgID')
                    console.log(CWStore.currentID);
                }
            })
        }, { threshold: 0.5 }
    )

    for (let i = 0; i < list.length; i++) {
        const e = list[i];
        observer.observe(e)
    }

}

const getLocalInfo = async function () {
    const filePath = CWStore.prop.chapterName.replaceAll('|', '/');;
    console.log(filePath);
    ElMessage.info({
        showClose: true,
        message: "正在解析文件中,请耐心等待3-5秒......"
    })
    infoList.value = await window.electronApi.getImagesBase64(filePath);
    CWStore.infoLength = infoList.value.length
}



</script>


<style scoped>
.bigBox {
    height: 96.5vh;
}

.sBox {
    height: 80vh;
}
</style>
